<!-- FIXME: разобраться с max-width: 99%; -->
<div id="usersTable" style="max-width: 99%;"></div>

<script>
    $(document).ready(function () {
        var table = new Tabulator("#usersTable", {
            // Базовые настройки таблицы.
            height: "100%",
            layout: "fitDataStretch",
            resizableColumnFit: true,
            ajaxURL: "/users/data",
            progressiveLoad: "scroll",
            placeholder: "No Data Set",
            ajaxConfig: "GET",

            // Настройки выделения области таблицы.
            selectableRange: 1,
            selectableRangeColumns: true,
            selectableRangeRows: true,
            selectableRangeClearCells: true,

            // Настройки копирования данных таблицы в буфер обмена.
            clipboard: true,
            clipboardCopyStyled: false,
            clipboardCopyConfig: {
                rowHeaders: false,
                columnHeaders: true,
            },
            clipboardCopyRowRange: "range",

            // Настройки столбцов.
            columns: [
                {
                    title: "{{ tr.id }}",
                    field: "id",
                    sorter: "number",
                    width: 42,
                },
                {
                    title: "{{ tr.login }}",
                    field: "login",
                    sorter: "string",
                    formatter: "link",
                    formatterParams: {
                        labelField: "login",
                        urlPrefix: "/user/",
                        urlField: "id"
                    },
                    headerFilter: "input"
                },
                {
                    title: "{{ tr.firstName }}",
                    field: "firstName",
                    sorter: "string",
                    headerFilter: "input",
                },
                {
                    title: "{{ tr.middleName }}",
                    field: "middleName",
                    sorter: "string",
                    headerFilter: "input",
                },
                {
                    title: "{{ tr.lastName }}",
                    field: "lastName",
                    sorter: "string",
                    headerFilter: "input",
                },
                {
                    title: "{{ tr.email }}",
                    field: "email",
                    sorter: "string",
                    headerFilter: "input",
                },
                {
                    title: "{{ tr.isOnline }}",
                    field: "isOnline",
                    sorter: "boolean",
                    formatter: "tickCross",
                    formatterParams: {
                        allowEmpty: true,
                        allowTruthy: true,
                        tickElement: "<i class='ri-flag-2-fill'></i>",
                        crossElement: "",
                    }
                },
                {
                    title: "{{ tr.needChangePassword }}",
                    field: "needChangePassword",
                    sorter: "boolean",
                    hozAlign: "center",
                    formatter: "tickCross",
                    formatterParams: {
                        allowEmpty: true,
                        allowTruthy: true,
                        tickElement: "<i class='ri-check-line'></i>",
                        crossElement: "",
                    }
                },
                {
                    title: "{{ tr.isBlocked }}",
                    field: "isBlocked",
                    sorter: "boolean",
                    hozAlign: "center",
                    formatter: "tickCross",
                    formatterParams: {
                        allowEmpty: true,
                        allowTruthy: true,
                        tickElement: "<i class='ri-check-line'></i>",
                        crossElement: "",
                    }
                },
                {
                    title: "{{ tr.uiLang }}",
                    field: "uiLang",
                    sorter: "string",
                },
            ],

            // Настройки начальной сортировки.
            initialSort: [
                { column: "lastName", dir: "asc" }, // сперва сортируем по фамилии
                { column: "isBlocked", dir: "asc" }, // затем по блоку
            ]
        });
    });
</script>